<template>
  <div>
    <el-form :model="formModel" ref="form" label-width="100px">
      <el-form-item label="试卷名称:">
        <el-input v-model="formModel.name"/>
      </el-form-item>
      <el-form-item label="学科:">
        <el-select v-model="formModel.subjectId" placeholder="请选择学科">
          <el-option
            v-for="item in subjects"
            :key="item.subject.id"
            :label="item.subject.name"
            :value="item.subject.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目列表:">
        <el-button type="primary" plain @click="openQuestionItemDialog">添加题目</el-button>
        <el-table
          :data="showedQuestions"
          max-height="350px">
          <el-table-column label="id" prop="id"/>
          <el-table-column label="题型" prop="questionType"/>
          <el-table-column label="题干" prop="content"/>
          <el-table-column label="参考答案" prop="correctAnswer"/>
          <el-table-column label="分数" prop="score"/>
          <el-table-column label="操作">
            <el-button type="danger" plain>删除</el-button>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="题目数量:">
        <div> {{ questionCount }}</div>
      </el-form-item>
      <el-form-item label="试卷总分:">
        <div> {{ examPaperScore }}</div>
      </el-form-item>
      <el-form-item label="建议时长:">
        <el-input-number v-model="formModel.suggestTime"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">确认</el-button>
        <el-button type="success" @click="handleExamPaperAddCancel">取消</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="选择题目" :visible.sync="dialogFormVisible">
      <el-table :data="questionItems" @selection-change="handleSelectionChange">
        <el-table-column type="selection"/>
        <el-table-column label="id" prop="id"/>
        <el-table-column label="题型" prop="questionType"/>
        <el-table-column label="题干" prop="content"/>
        <el-table-column label="参考答案" prop="correctAnswer"/>
        <el-table-column label="分数" prop="score"/>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleQuestionDialogConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "ExamPaperAdd",
  mounted() {
    this.getSubject();
  },
  data() {
    return {
      formModel: {
        name: '',
        subjectId: '',
        suggestTime: 0,
      },
      subjects: [],
      showedQuestions: [],
      questionItems: [],
      dialogFormVisible: false,
      multipleSelection: [],
    }
  },
  computed: {
    questionCount() {
      return this.showedQuestions.length;
    },
    examPaperScore() {
      let score = 0;
      for (let q of this.showedQuestions) {
        score += q.score;
      }
      return score;
    },
  },
  methods: {
    submit() {
      const url = '/examPapers';
      const subData = {...this.formModel};

      let questionIds = [];
      for (let q of this.showedQuestions) {
        questionIds.push(q.id);
      }
      subData.questionCount = this.questionCount;
      subData.score = this.examPaperScore;
      subData.questionIds = questionIds;

      this.axios.post(url, subData).then(resp => {
          if (resp.code === 200) {
            this.$message({
              type: "success",
              message: '添加成功',
              center: true,
            });
            this.$router.push({name: 'ExamPaperPage'});
          } else {
            this.$message({
              type: "error",
              message: resp.message,
              center: true,
            });
          }
        }
      )
    },
    getSubject() {
      const url = '/subjects';
      this.axios.get(url).then(resp => {
        this.subjects = resp.data;
      })
    },
    openQuestionItemDialog() {
      const url = `/questions/${this.formModel.subjectId}`;
      this.axios.get(url).then(resp => {
        const tempItems = resp.data;
        this.questionItems = tempItems.map(item => {
          item.questionType = this.transferType(item.questionType);
          return item;
        })
      })
      this.dialogFormVisible = true;
    },
    transferType(type) {
      let str = '未知';
      switch (type) {
        case 1:
          str = '单选题';
          break;
        case 2:
          str = '多选题';
          break;
        case 3:
          str = '判断题';
          break;
        case 4:
          str = '填空题';
          break;
        case 5:
          str = '简答题';
          break;
      }
      return str;
    },
    handleExamPaperAddCancel() {
      this.$router.go(-1);
    },
    handleQuestionDialogConfirm() {
      this.dialogFormVisible = false;
      this.showedQuestions = this.multipleSelection;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
}
</script>

<style scoped>
::v-deep(.el-form) {
  font-weight: bold;
}
</style>